<template>
  <Select placeholder="请输入运单号" :value="value" @on-change="change" filterable clearable remote :remote-method="searchWaybill" :loading="searchLoading">
    <Option v-for="(option, index) in waybillOptions" :value="option.value" :key="`waybill-complete-option-${option.value}`" :label="option.label">
      {{showInfo?`${option.label} ${option.name} ${option.status}`:option.label}}
    </Option>
  </Select>
</template>

<script>
  import {post}  from '@/util/request'

  export default {
    props: ["value",'showInfo'],
    data() {
      return {
        waybillVals: [],
        waybillOptions: [],
        searchLoading: false
      }
    },
    methods:{
      change(v){
        this.$emit("input", v);
        this.$emit("on-change", v);
      },
      searchWaybill(query){
        if(query !== '' && query.length >= 3) {
          this.searchLoading = true;
          let data = {
            waybillNo: query
          };
          post('/common/findWaybillByWaybillNo', data).then(json => {
            this.searchLoading = false;
            if (json.data.sta === 200) {
              this.waybillOptions = json.data.data.map(item => {
                let str = '';
                switch(item.billStatus){
                  case 0: str = '未排班'; break;
                  case 1: str = '已排班'; break;
                  case 2: str = '进行中'; break;
                  case 3: str = '完成'; break;
                }
                return {
                  value: item.billId,
                  label: item.billId,
                  name: item.cusName,
                  status: str
                };
              });
            }
          });
        } else {
          this.waybillOptions = [];
        }
      }
    }
  }
</script>
